<template lang="">
    <div>
        <input v-model="leftNum"  type="number"  />
        <select v-model="rule">
            <option v-for="(item,index) in arr" :value="item.value" :key="index">{{ item.label }}</option>
        </select>
        <input v-model="right" type="number" />
        <button @click="setResultNum">=</button>
        {{ resultNum }}
    </div>
</template>
<script>
export default{
    data() {
        return {
            leftNum: 1,
            right: 1,
            resultNum: null,
            rule: '',
            arr:[
                {
                    label:'加法',
                    value:'+'
                },
                {
                    label:'减法',
                    value:'-'
                },
                {
                    label:'乘法',
                    value:'*'
                },
                {
                    label:'除法',
                    value:'/'
                },
                {
                    label:'幂运算',
                    value:'**'
                }
            ]
        }
    },
    methods:{
        setResultNum(){
            if(!this.leftNum || !this.right) return alert('非法参数！')
            if(this.rule === '+') this.resultNum =Number(this.leftNum) + Number(this.right)
            if(this.rule === '-') this.resultNum =Number(this.leftNum) - Number(this.right)
            if(this.rule === '*') this.resultNum =Number(this.leftNum) * Number(this.right)
            if(this.rule === '/') this.resultNum =Number(this.leftNum) / Number(this.right)
            if(this.rule === '**') this.resultNum =Number(this.leftNum) ** Number(this.right)
        }
    }
}
</script>
<style lang="">


</style>